<!--
 * @Author: Bonnie
 * @Date: 2021-12-02 18:19:49
 * @LastEditTime: 2022-01-25 16:13:40
 * @LastEditors: lee_124
 * @Description: 
 * @FilePath: /public_demo/src/components/Nav.vue
-->
<template>
  <div class="nav-container">
    <ul>
      <li
        class="single"
        :class="[selectNav == path.id ? 'actived' : '']"
        v-for="path in pathList"
        :key="path.id"
      >
        <span class="left cursor-pointer" @click="toOthers(path)">{{path.title}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Nav",
  data() {
    return {
      selectNav: 0,
      pathList: [
        {
          id: 1,
          title: "带有悬停效果的 CSS 三角形",
          path: "/triangle_with_hover"
        },
        {
          id: 2,
          title: "全局修改选中文案的样式",
          path: "/selection"
        },
        {
          id: 3,
          title: "当前导航悬浮样式",
          path: "/nav_hover"
        },
        {
          id: 4,
          title: "旋转的圆环",
          path: "/rotating_ring"
        },
        {
          id: 5,
          title: "元素滚动到可视区域",
          path: "/scroll_into_view"
        },
        {
          id: 6,
          title: "前端代理解决跨域+axios使用",
          path: "/api_proxy"
        },
        {
          id: 7,
          title: "关于可编辑div",
          path: "/edit_div"
        },
        {
          id: 8,
          title: "上传下载文件",
          path: "/file"
        },
        {
          id: 9,
          title: "文本展开、收缩",
          path: "/shrinkage"
        },
        {
          id: 10,
          title: "动态切换图片路径",
          path: "/dynamic_path"
        },
        {
          id: 11,
          title: "vue过渡动画",
          path: "/vue_transition"
        },
        {
          id: 12,
          title: "视频列表布局",
          path: "/video_list"
        },
        {
          id: 13,
          title: "左侧固定，右侧自适应",
          path: "/adaptive"
        },
        {
          id: 14,
          title: "鼠标点击效果",
          path: "/clickEffect"
        },
        {
          id: 15,
          title: "角标的设置",
          path: "/angle_mark"
        },
        {
          id: 16,
          title: "js技巧",
          path: "/js_skill"
        },
        {
          id: 17,
          title: "css隐藏",
          path: "/css_hide"
        },
        {
          id: 18,
          title: "使用一些工具",
          path: "/quick"
        }
      ]
    };
  },
  watch: {
    // 监听路由 修改选中的菜单
    $route: {
      handler: function(val, oldval) {
        if (!this.pathList.filter(item => item.path == val.path).length) return;
        let selectNav = 0;
        if (val.path != "/") {
          selectNav =
            this.pathList.filter(item => item.path == val.path)[0]?.id || 0;
        }
        this.selectNav = selectNav;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 路由跳转
    toOthers({ path, id }) {
      if (path == this.$route.path) return;
      this.selectNav = id;
      this.$router.push({ path });
    }
  }
};
</script>
<style lang='scss' scoped>
.nav-container {
  width: 240px;
  height: 100%;
  border-right: 1px solid #eaecef;

  ul {
    overflow-y: auto;
    height: 100%;
    .actived {
      color: #8340ff;
    }
    li {
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      // 菜单悬浮效果
      span {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 98%;
          height: 2px;
          bottom: 0;
          left: 0;
          transform: scaleX(0);
          background-color: #a862ea;
          transform-origin: bottom right;
          transition: transform 0.3s ease-in-out;
        }
        &:hover {
          color: #8340ff;
          &::after {
            transform: scaleX(1);
            transform-origin: bottom left;
          }
        }
      }
    }
  }
}
ul::-webkit-scrollbar {
  width: 0px !important;
}
</style>